<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="header">
      <div class="content flex">
        <div class="logo"><img src="images/newLogo.png" alt="" /></div>
        <div class="menu">
          <div class="menu_up"><img src="images/menu.png" alt="" /></div>
          <div class="menu_down none">
            <div class="down_head flex">
              <img src="images/newLogo.png" alt="" />
              <img src="images/close_b.png" ∏ class="closeMenu" alt="" />
            </div>
            <div class="topSearch">
              <input type="text" class="searchInput" placeholder="请输入关键" />
              <img src="images/search-b.png" alt="" />
            </div>
            <ul>
              <li><a href="">新闻中心</a></li>
              <li><a href="">培训课程</a></li>
              <li><a href="">特色项目</a></li>
              <li><a href="">师资列表</a></li>
              <li><a href="">关于我们</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="Filebox m-top">
      <div class="title">
        <div class="name">
          结业
        </div>
      </div>
      <div class="ICourseinfo">
        <img src="images/zw.jpg" alt="" />
      </div>
      <div class="tablist scroll">
        <div class="tab_tags">详情</div>
        <div class="tab_tags">调查</div>
        <div class="tab_tags">在线</div>
        <div class="tab_tags">线下</div>
        <div class="tab_tags">作业</div>
        <div class="tab_tags">考试</div>
        <div class="tab_tags checked">结业</div>
      </div>
      <div class="uploadimg">
        <div class="uploadBox">
          <form id="head-img" enctype="multipart/form-data">
            <input
              type="file"
              name="imgfile"
              style="display: none !important;"
              onchange="uploadPic()"
              id="imgfile"
              accept="image/*"
              value=""
            />
          </form>
          <img class="head-img" id="user-head" src="images/upimg.png" />
          <p>点击上传图片</p>
        </div>
        <div class="Describe">
          <p>恭喜您完成所有课程学习，请先填写反馈意见表</p>
          <p>
            再上传证书招聘，我们正为您制作毕业证书。证书照片上传截止时间为2020年6月30日，请抓紧时间。
          </p>
          <p>
            照片上传要求为200*200免冠蓝底招聘，文件格式为jpg,gif,png，文件小于10M
          </p>
        </div>
        <div class="btn">
          <ul>
            <li><a href="">填写反馈表</a></li>
            <li>
              <input
                onclick="javascript:$('.uptoimg').click();"
                type="button"
                class="upbtn"
                value="上传图片"
              />
              <input type="file" class="uptoimg none" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="foot">
      <a class="sy checked"><span></span><i>首页</i></a>
      <a class="kc"><span></span><i>我的课程</i></a>
      <a class="grzx"><span></span><i>个人中心</i></a>
    </div>
  </body>
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/public.js"></script>
  <script>
    // tab切换
    $(".tablist .tab_tags").click(function () {
      $(this).addClass("checked").siblings().removeClass("checked");
      // $(".products .mainCont").eq($(this).index()).show().siblings().hide();
    });

    $("body").on("click", ".head-img", function () {
      $("#imgfile").trigger("click"); //通过点击图片执行input file事件
    });
    //上传到服务器
    function uploadPic() {
      var formData = new FormData($("#head-img")[0]);
      //上传到服务器
      $.ajax({
        url: p_path + "/App/uploadFile", //上传图片服务器地址
        type: "POST",
        data: formData, //form对象
        cache: false,
        contentType: false,
        processData: false,
        success: function (d) {
          var imgtype = d.info;
          imgtype = imgtype.toLowerCase(); //统一小写
          if (
            imgtype.split(".")[1] != "png" &&
            imgtype.split(".")[1] != "jpeg" &&
            imgtype.split(".")[1] != "bmp" &&
            imgtype.split(".")[1] != "jpg"
          ) {
            mui.toast("请上传图片格式");
          } else {
            $("#user-head").attr("src", imgtype);
            //    在这写上传
          }
        },
      });
    }
  </script>
</html>
